﻿<!doctype html>
<html>
<head>
<title>css3 demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles/common.css" rel="stylesheet" />
<style>
/*-----------------------------------------------
	- common
-----------------------------------------------*/
/* btn */
.btn_grey { display:inline-block; margin:10px; padding:10px 25px; border:1px solid #B8B8B8; border-radius:100px; box-shadow:inset 0 1px 1px rgba(255,255,255,1); color:#3D3D3D; text-shadow:0 1px rgba(255,255,255,0.5); font-weight:700; font-size:14px;
			background:#dedede;
			background:gradient(linear,0% 0,0% 100%,from(#eee),to(#ccc));
			background:-moz-linear-gradient(100% 100% 90deg,#ccc,#eee);
			background:-webkit-gradient(linear,0% 0,0% 100%,from(#eee),to(#ccc));
}
.btn_grey:hover { text-decoration:none;
			background:#EEE;
			background:gradient(linear,0% 0,0% 100%,from(#f5f5f5),to(#dbdbdb));
			background:-moz-linear-gradient(100% 100% 90deg,#dbdbdb,#f5f5f5);
			background:-webkit-gradient(linear,0% 0,0% 100%,from(#f5f5f5),to(#dbdbdb));
}
.btn_grey_tiny { padding:3px 10px; font-size:11px; line-height:14px; }

.btn_green { display:inline-block; margin:10px; padding:3px 10px; border:1px solid #769800; border-radius:5px; box-shadow:inset 0 1px 1px rgba(255,255,255,.25); color:#FFF; font-weight:700; font-size:12px; line-height:12px;
			background:#7ead00;
			background:gradient(linear,0% 0,0% 100%,from(#8cc000),to(#739e00));
			background:-moz-linear-gradient(100% 100% 90deg,#739e00,#8cc000);
			background:-webkit-gradient(linear,0% 0,0% 100%,from(#8cc000),to(#739e00));		
}
.btn_green:hover { text-decoration:none;
			background:#8bbf00;
			background:gradient(linear,0% 0,0% 100%,from(#96ce00),to(#7ead00));
			background:-moz-linear-gradient(100% 100% 90deg,#7ead00,#96ce00);
			background:-webkit-gradient(linear,0% 0,0% 100%,from(#96ce00),to(#7ead00));
}

.btn_red { display:inline-block; margin:10px; padding:3px 10px; border:1px solid #980000; border-radius:5px; box-shadow:inset 0 1px 1px rgba(255,255,255,.25); color:#FFF; font-weight:700; font-size:12px; line-height:12px; text-decoration:none!important;
			background:#C00005;
			background:gradient(linear,0% 0,0% 100%,from(#c00005),to(#9e0004));
			background:-moz-linear-gradient(100% 100% 90deg,#9e0004,#c00005);
			background:-webkit-gradient(linear,0% 0,0% 100%,from(#c00005),to(#9e0004));
}


/* form */
input[type="text"], textarea, input[type="password"] { margin:5px 10px; padding:8px 15px; border:1px solid #B8B8B8; border-radius:5px; background-color:#FFF; outline:none; font-size:14px; }
input[type="text"]:focus, textarea:focus, input[type="password"]:focus { background-color:#FCFFE8;}
.input_sm { width:180px; }
.input_big { width:400px;}

/* form */
.count { margin:5px 10px; padding:1px 5px 2px; border:1px solid #DDD; border-radius:20px; background-color:#E5E5E5; color:#666; font-size:10px; line-height:11px; }

/* tipbox */
.tipbox { width:300px; margin:10px; border:1px solid #C1C1C1; border-radius:4px; box-shadow:0 0 13px rgba(0, 0, 0, 0.31);}
	.tipbox .btn_close{ float:right; display:block; width:8px; height:8px; overflow:hidden; margin:9px; background-image:url(images/icon_close.png); text-indent:-9999px; }
	.tipbox .btn_close:hover { background-position:0 -16px; }
	.tipbox_tit { padding:12px 10px 9px; font-size:14px; font-weight:700; border-top-left-radius:4px; border-top-right-radius:4px; text-shadow:0 1px 0 #fff;
				background:#f6f8f8;
				filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f6f8f8',endColorstr='#e9eeee');
				background:-webkit-gradient(linear,left top,left bottom,from(#f6f8f8),to(#e9eeee));
				background:-moz-linear-gradient(top,#f6f8f8,#e9eeee);border-bottom:1px solid #f0f3f3;	
	}
	.tipbox_cont { padding:10px; border-top:1px solid #DDD; }
</style>
</head>
<body>
<a class="btn_grey" href="#">Go to Gmail »</a>
<a class="btn_grey btn_grey_tiny" href="#">Go to Gmail »</a>
<a class="btn_green" href="#">+ follow</a>
<a class="btn_red" href="#">- unfollow</a>

<div style="height:20px; background:#999; color:#FFF">w</div>

<input type="text" name="username" maxlength="15" class="input_sm" />
<br />
<input type="text" name="username" maxlength="50" class="input_big" /> 

<div style="height:20px; background:#999; color:#FFF">w</div>
<span class="count">1</span>
<span class="count">2</span>

<div style="height:20px; background:#999; color:#FFF">w</div>
<div class="tipbox">
	<a href="javascript:void(0)" class="btn_close">close</a>
	<div class="tipbox_tit">Tags Tages</div>
	<div class="tipbox_cont">
		Nothing to show, Nothing to show, Nothing to show
	</div>
</div>





































</body>
</html>